import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export const useLazyData = (apiFn) => {
  const target = ref(null)
  const goods = ref([])
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      apiFn().then(data => {
        goods.value = data.result
      })
      // 停止监听
      stop()
    }
  }, {
    // 组件模板进入可视区的比例 0-1（默认值大于0）
    // 我们希望，组件刚进入可视区就触发回调
    threshold: 0
  })
  return { goods, target }
}
// // 封装一个Hook方法实现数据懒加载
// export const useLazyData = (apiFn) => {
//   // 当前组件进入可视区时触发接口调用
//   // 被监听的DOM元素
//   const target = ref(null)
//   // 调用接口获取的结果
//   const result = ref([])
//   const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
//     if (isIntersecting) {
//       // 进入可视区
//       apiFn().then(data => {
//         result.value = data.result
//       })
//       // 停止监听
//       stop()
//     }
//   })
//   return { result, target }
// }
